<template>
  <div class="user-page">
    <div class="user-top">
      我 的
    </div>
    <div class="user-header clearfix">
      <div class="avater"></div>
      <div class="user-info">
        <div class="name">
          <span v-if="userData">{{userData.userName}}</span>
          <span v-else>未登录</span>
        </div>
        <div
          class="desc"
          @click="toPage('login')"
        >
          <span v-if="userData">个性签名：幅度萨芬奴家回</span>
          <span v-else>点击此处登录</span>
        </div>
      </div>
    </div>
    <div class="user-main">
      <van-cell-group>
        <van-cell
          title="余额"
          icon="points"
          class="m-primary"
        />
        <van-cell
          title="收藏"
          icon="star-o"
          class="m-warning"
        />
        <van-cell
          title="订单"
          icon="orders-o"
          class="m-friend"
        />
        <!-- <van-cell
          title="优惠券"
          icon="point-gift-o"
          class="m-success"
        /> -->
        <van-cell
          title="地址"
          icon="location-o"
          class="m-info"
          to='/user/address/list'
        />
        <van-coupon-cell
          icon="point-gift-o"
          class="m-success"
          :coupons="state.coupons"
          :chosen-coupon="state.chosenCoupon"
          @click="handleShowList"
        />
      </van-cell-group>
      <van-button
        round
        block
        type="primary"
        class="log-out"
        @click="logout"
        native-type="submit"
      >
        退 出
      </van-button>
    </div>
    <van-popup
      v-model="state.isShowCouPons"
      round
      position="bottom"
      style="height: 500px; padding-top: 4px;"
    >
      <van-coupon-list
        class="xxxxxxxxxxxxxx"
        :coupons="state.coupons"
        :chosen-coupon="state.chosenCoupon"
        :disabled-coupons="state.disabledCoupons"
        @change="onChange"
        @exchange="onExchange"
      />
    </van-popup>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getCache, clearCache } from "/@utils/tools.js";
const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠12元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1.5",
  unitDesc: "元",
};
export default {
  name: "User",
  setup() {
    const { userData } = initUserData();
    const { push } = useRouter();
    const state = reactive({
      isShowCouPons: false,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
    });
    const toPage = (page, query) => {
      push({ path: "/" + page });
    };
    const logout = () => {
      clearCache();
      push("/login");
    };
    const handleShowList = () => {
      state.isShowCouPons = true;
      console.log(state.isShowCouPons);
    };
    const onChange = () => {};
    const onExchange = () => {};

    return {
      state,
      userData,
      toPage,
      logout,
      handleShowList,
      onChange,
      onExchange,
    };
  },
};
const initUserData = () => {
  let userData = reactive(JSON.parse(getCache("user")));
  console.log(userData);
  return { userData };
};
</script>
<style lang="less" scoped>
.user-page {
  position: relative;
  height: 100%;
  .user-top {
    text-align: center;
    line-height: 44px;
    color: #fff;
    font-size: 1.2rem;
    background-color: #d41e32;
  }
  .user-header {
    padding: 20px 0 20px 20px;
    .avater {
      float: left;
      width: 80px;
      height: 80px;
      background-color: #aaa;
      border-radius: 50%;
      margin-right: 20px;
    }
    .user-info {
      display: flex;
      flex-flow: column;
      justify-content: center;
      height: 80px;
      .name {
        font-size: 1.2rem;
        margin-bottom: 5px;
      }
      .desc {
        color: #999;
        width: 70%;
        font-size: 0.9rem;
      }
    }
  }
  .user-main {
    height: calc(100% - 164px);
    .log-out {
      line-height: 54px;
      margin-top: 50px;
      text-align: center;
      color: #fff;
      font-size: 1.2rem;
      width: 90%;
      left: 5%;
      border-color: #d41e32;
      background-color: #d41e32;
    }
  }
}
</style>